// 指标库管理
import { Form, Input, Button, message, Space, Table, Modal,Select,DatePicker,Pagination,Upload } from 'antd';
import { ReloadOutlined, SearchOutlined,PlusOutlined,ExclamationCircleFilled,DownloadOutlined } from "@ant-design/icons";
import { useState,useEffect } from 'react';
import type { UploadProps } from 'antd';
import { http } from "@/utils/request";
import { exportToXlsxBlob } from '@/pages/utils/exportToXlsx';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'

dayjs.extend(customParseFormat)
dayjs.extend(advancedFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)
type TableRowSelection<T> = TableProps<T>['rowSelection'];
type TableDataType = {
  id:1,
  code: string;
  name: string;
  attribute: string;
  maxScore: string;
  minScore: string;
  evaluationMethod: string;
  department: string;
}
const { confirm } = Modal;
const indicatorLibrary = () =>{
  const { RangePicker } = DatePicker;
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const [addForm] = Form.useForm();
  const [detailForm] = Form.useForm();
  
  const [option,setOption] = useState([]);
  const [data,setData] = useState([
    {id:1,code:'TradeCode12',name:'满意度',attribute:'无',maxScore:'150',minScore:'60',evaluationMethod:'111',department:'业务控制部',examineDept:'业务控制部',managementDept:'综合管理部',targetTypeName:'管理指标',content:'提升业务支撑满意度',status:'临时指标',standard:'建立健全管理规章制度、实施细则，及时率、准确率100%',startTime:'2024-01-07',endTime:'2024-04-07'}
  ]);
  const [pageNum,setPageNum] = useState(1);
  const [pageSize,setPageSize] = useState(10);
  const [total,setTotal] = useState();
  const [title,setTitle] = useState('新增指标');
  const [addOrEditModal,setAddOrEditModal] = useState(false);
  const [detailModal,setDetailModal] = useState(false);
  const [id,setId] = useState(null);
  const [detailData,setDetailData] = useState({});
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  
  const columns: TableColumnsType<TableDataType> = [
    {
      title: "序号",
      key: "index",
			align:'center',
      width:80,
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      title: "指标编码",
      dataIndex: "code",
			align:'center',
      width:150,
    },
    {
      title: "指标名称",
      dataIndex: "name",
			align:'center',
      width:150,
    },
    {
      title: "指标属性",
      dataIndex: "attribute",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            {record.attribute === "10" && <span>集团</span>}
            {record.attribute === "20" && <span>中心</span>}
            {record.attribute === "30" && <span>部门</span>}
          </>
        )
      }
    },
    {
      title: "最高分值",
      dataIndex: "maxScore",
			align:'center',
      width:150,
    },
    {
      title: "最低分值",
      dataIndex: "minScore",
			align:'center',
      width:150,
    },
    {
      title: "考评方式",
      dataIndex: "evaluationMethod",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            {record.evaluationMethod === "40" && <span>定量</span>}
            {record.evaluationMethod === "50" && <span>定性</span>}
          </>
        )
      }
    },
    {
      title: "所属部门",
      dataIndex: "department",
			align:'center',
      width:150,
    },
    {
      title: "考核部门",
      dataIndex: "examineDept",
			align:'center',
      width:150,
    },
    {
      title: "管理部门",
      dataIndex: "managementDept",
			align:'center',
      width:150,
    },
    {
      title: "指标类型",
      dataIndex: "targetTypeName",
			align:'center',
      width:150,
    },
    {
      title: "指标定义",
      dataIndex: "content",
			align:'center',
      width:150,
    },
    {
      title: "指标状态",
      dataIndex: "status",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            {record.status === "60" && <span>临时指标</span>}
            {record.status === "70" && <span>生效</span>}
            {record.status === "80" && <span>失效</span>}
          </>
        )
      }
    },
    {
      title: "审核状态",
      dataIndex: "auditStatus",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            {record.auditStatus === "90" && <span>待提交</span>}
            {record.auditStatus === "100" && <span>审核中</span>}
            {record.auditStatus === "110" && <span>审核驳回</span>}
            {record.auditStatus === "120" && <span>审核通过</span>}
          </>
        )
      }
    },
    {
      title: "考评标准",
      dataIndex: "standard",
			align:'center',
      width:200,
    },
    {
      title: "生效日期",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            <span>{record.startTime}至{record.endTime}</span>
          </>
        )
      }
    },
    {
      title: "操作",
			width:250,
			align:'center',
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <Button type={'link'} onClick={() => {
              setDetailModal(true);
              const data= JSON.parse(JSON.stringify(record));
              data.validityTime = dayjs(data.startTime).format('YYYY-MM-DD') + '至' + dayjs(data.endTime).format('YYYY-MM-DD')
              // if(data.validityTime) data.validityTime = dayjs(data.validityTime).format("YYYY-MM-DD")validityTime
              detailForm.setFieldsValue(data)
              setDetailData(data)
            }}>详情</Button>
            <Button type={'link'} onClick={async()=>{
              setTitle('修改指标');
              setAddOrEditModal(true);
              const data = JSON.parse(JSON.stringify(record));
              data.validityTime = [dayjs(data.startTime, 'YYYY-MM-DD'),dayjs(data.endTime, 'YYYY-MM-DD')]
              data.targetTypeId = Number(data.targetTypeId)
              setId(data.id);
              addForm.setFieldsValue(data)
            }}>编辑</Button>
            <Button type={'link'} danger onClick={()=>{
              confirm({
                title: '提示?',
                icon: <ExclamationCircleFilled />,
                content: '此操作将永久删除该数据，是否继续?',
                cancelText:'取消',
                okText:'确定',
                onOk() {
                  delData(record.id)
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}>删除</Button>
          </>
        )
      }
    }
  ];
  //删除
  const delData = async(id:number) =>{
    try {
      const res = await http.get({
        url:'/pmPerformTargetItem/remove',
        params:{
          itemId:id,
        }
      })
      if(res.code==200){
        message.success('删除成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const addData = () =>{
    setTitle('新增指标');
    setId(null);
    setAddOrEditModal(true);
    addForm.resetFields();
  }
  const onSearchHandler = () => {
    getList();
  };
  const onResetHandler = () => {
    form.resetFields();
    getList();
  };
  //关闭新增/编辑指标库弹窗
  const handleCancel = () =>{
    setAddOrEditModal(false);
  }
  const detailModalCancel = () =>{
    setDetailModal(false);
  }
  // 批量提交
  const batchSubmit = () =>{
    confirm({
      title: '提示?',
      icon: <ExclamationCircleFilled />,
      content: '确认提交所选数据吗?',
      cancelText:'取消',
      okText:'确定',
      async onOk() {
        try {
          const res = await http.post({
            url:'/pmPerformTargetItem/submit',
            data:selectedRowKeys,
          })
          if(res.code==200){
            message.success('指标提交成功!');
            setSelectedRowKeys([])
            getList();
          }else{
            message.error(res.msg);
          }
        } catch (errorInfo) {
          console.log('Failed:', errorInfo);
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  // 模板下载
  const downloadTemp = async() =>{
    try {
      const res = await http.get({
        url:'/pmPerformTargetItem/exportTemplate',
        responseType: 'arraybuffer'
      })
      if(res.code==200){
        exportToXlsxBlob(res,'指标导入模板')
        message.success('模板开始下载!');
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
    
  }
  // 指标导入
  const uploadprops: UploadProps = {
    // 这里我们只接受excel2007以后版本的文件，accept就是指定文件选择框的文件类型
    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    name: 'file',
    action: '/api/performance/pmPerformTargetItem/importExcel',
    headers: {
      'X-YUJIA-Principal':"%7B%22divs%22%3A%22%22%2C%22enabled%22%3Atrue%2C%22accountNonExpired%22%3Atrue%2C%22credentialsNonExpired%22%3Atrue%2C%22accountNonLocked%22%3Atrue%2C%22manageOrgId%22%3Anull%2C%22orgCode%22%3A%22%22%2C%22orgName%22%3A%22%22%2C%22jobCode%22%3A%22%22%2C%22jobId%22%3Anull%2C%22name%22%3A%22%E5%B9%B3%E5%8F%B0%E7%AE%A1%E7%90%86%E5%91%98%22%2C%22jobCodes%22%3A%22%22%2C%22roleCodes%22%3A%22'PlatformManager'%22%2C%22subject%22%3Anull%2C%22issuer%22%3Anull%2C%22audience%22%3Anull%2C%22authenticatedAt%22%3Anull%2C%22nonce%22%3Anull%2C%22authenticationContextClass%22%3Anull%2C%22authenticationMethods%22%3Anull%2C%22authorizedParty%22%3Anull%2C%22accessTokenHash%22%3Anull%2C%22authorizationCodeHash%22%3Anull%2C%22issuedAt%22%3Anull%2C%22expiresAt%22%3Anull%2C%22zoneInfo%22%3Anull%2C%22locale%22%3Anull%2C%22fullName%22%3Anull%2C%22email%22%3Anull%2C%22givenName%22%3Anull%2C%22familyName%22%3Anull%2C%22profile%22%3Anull%2C%22nickName%22%3Anull%2C%22preferredUsername%22%3Anull%2C%22picture%22%3Anull%2C%22website%22%3Anull%2C%22emailVerified%22%3Anull%2C%22gender%22%3Anull%2C%22birthdate%22%3Anull%2C%22phoneNumber%22%3Anull%2C%22phoneNumberVerified%22%3Anull%2C%22username%22%3A%22platformAdmin%22%2C%22address%22%3A%7B%22formatted%22%3Anull%2C%22streetAddress%22%3Anull%2C%22locality%22%3Anull%2C%22region%22%3Anull%2C%22postalCode%22%3Anull%2C%22country%22%3Anull%2C%22%40class%22%3A%22org.springframework.security.oauth2.core.oidc.DefaultAddressStandardClaim%22%7D%2C%22id%22%3A2%2C%22updatedAt%22%3Anull%2C%22middleName%22%3Anull%2C%22jobName%22%3A%22%22%2C%22orgId%22%3Anull%2C%22password%22%3Anull%7D",
        'x-yujia-app-id':"app1",
        'x-yujia-current-app':'{"appId":"app1","id":2}',
    },
    showUploadList:false,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success('导入成功！');
        getList();
      } else if (info.file.status === 'error') {
        message.error('导入失败！');
      }
    },
  };
  // 指标导出
  const indicatorExport = ()=>{
    confirm({
      title: '提示?',
      icon: <ExclamationCircleFilled />,
      content: '确认要导出所有数据为excel吗?',
      cancelText:'取消',
      okText:'确定',
      async onOk() {
        try {
          const res = await http.post({
            url:'/pmPerformTargetItem/exportList',
            responseType: 'arraybuffer'
          })
          if(res.code==200){
            exportToXlsxBlob(res,'指标库数据')
            message.success('导出成功!');
          }else{
            message.error(res.msg);
          }
        } catch (errorInfo) {
          console.log('Failed:', errorInfo);
        }
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  // 提交
  const submit = async() =>{
    try {
      const values = await addForm.validateFields();
      values.startTime = dayjs(values.validityTime[0]).format('YYYY-MM-DD');
      values.endTime = dayjs(values.validityTime[1]).format('YYYY-MM-DD');
      values.addOrSubmit = true;
      delete values.validityTime;
      values.itemName = values.name
      delete values.name
      if(title=='新增指标'){
        addSave(values);
      }else{
        editSave(values);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  //保存新增/编辑指标库信息
  const handleOk = async() =>{
    try {
      const values = await addForm.validateFields();
      values.startTime = dayjs(values.validityTime[0]).format('YYYY-MM-DD');
      values.endTime = dayjs(values.validityTime[1]).format('YYYY-MM-DD');
      delete values.validityTime;
      values.itemName = values.name
      delete values.name
      values.addOrSubmit = false;
      // 校验成功，执行保存操作并关闭Modal
      if(title=='新增指标'){
        addSave(values);
      }else{
        editSave(values);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  //新增接口
  const addSave = async(data:object) =>{
    try {
      const res = await http.post({
        url:'/pmPerformTargetItem/add',
        data:data,
      })
      if(res.code==200){
        setAddOrEditModal(false);
        message.success('指标新增成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  //编辑接口
  const editSave = async(data:object) =>{
    try {
      const res = await http.post({
        url:'/pmPerformTargetItem/update',
        data:{id,...data}
      })
      if(res.code==200){
        setAddOrEditModal(false);
        message.success('指标修改成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  }
  //修改页码或分页大小
  const changePagination = async (page: number, size: number)=>{
    setPageNum(page);
    if(size!==pageSize){
      setPageNum(1);
    }
    setPageSize(size);
  }
  //查询接口
  const getList = async() =>{
    try {
      const res = await http.get({
        url:'/pmPerformTargetItem/qryList',
        params:{
          itemName:form.getFieldValue().itemName,
          targetTypeId:form.getFieldValue().targetTypeId,
          status:form.getFieldValue().status,
          pageNum:pageNum,
          pageSize:pageSize,
        }
      })
      setData(res.rows);
      setTotal(res.total);
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  //获取指标类型
  const getTypeList = async()=>{
    try {
      const res = await http.get({
        url:'/pmPerformTargetType/qryList'
      })
      if(res.code==200){
        setOption(res.rows.map(item=>({value:item.id,label:item.name})))
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  useEffect(()=>{
    getList();
    getTypeList();
  },[pageNum,pageSize])
  return(
    <div>
      <div className={'title'}>指标库管理</div>
      <Form
        form={form}
        layout={'inline'}
        autoComplete="off"
      >
        <Form.Item name="itemName" label={'指标名称'} >
          <Input placeholder="请输入指标名称" />
        </Form.Item>
        <Form.Item name="targetTypeId" label={'指标类型'} >
          <Select placeholder="请选择指标类型" style={{width:'180px'}} options={option} />
        </Form.Item>
        <Form.Item name="status" label={'指标状态'} >
          <Select placeholder="请选择指标状态" style={{width:'180px'}} options={[
            { value: '60', label: '临时指标' },
            { value: '70', label: '生效' },
            { value: '80', label: '失效' },
          ]} />
        </Form.Item>
        <Form.Item className={'search-form-button !flex-1 text-right'}>
          <Space>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearchHandler}>
              查询
            </Button>
            <Button icon={<ReloadOutlined />} onClick={onResetHandler}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <Space>
        <Button type="primary" icon={<PlusOutlined />} onClick={addData}>
          新增
        </Button>
        <Button icon={<DownloadOutlined />} onClick={downloadTemp}>
          模板下载
        </Button>
        <Upload {...uploadprops}>
          <Button>指标导入</Button>
        </Upload>
        <Button onClick={indicatorExport}>指标导出</Button>
        <Button disabled={selectedRowKeys.length>0?false:true} onClick={batchSubmit}>批量提交</Button>
      </Space>
      <Table
        scroll={{ x: 1300 }}
        style={{marginTop:'20px'}}
        dataSource={data}
        bordered
        columns={columns}
        pagination={false}
        rowKey={(record) => `${record.id}`}
        rowSelection={rowSelection}
      ></Table>
      <Pagination
        className={'m-[20px] text-end'}
        current={pageNum}
        pageSize={pageSize}
        total={total}
        align="end"
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
        onChange={changePagination}
      />
      {/* 新增或编辑指标库弹窗 */}
      <Modal title={title} open={addOrEditModal} onCancel={handleCancel} footer={[
        <Button key="back" onClick={handleCancel}>
          返回
        </Button>,
        <Button key="save" onClick={handleOk}>
          保存
        </Button>,
        <Button key="submit" htmlType="submit" type="primary" onClick={submit}>
          提交
        </Button>,
      ]} style={{ top: 0 }}>
        <Form
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          form={addForm}
          autoComplete="off"
        >
          <Form.Item name="targetTypeId" label={'指标类型'} rules={[{ required: true, message: '请选择指标类型!' }]}>
            <Select placeholder="请选择指标类型" options={option} />
          </Form.Item>
          <Form.Item name="code" label={'指标编码'}>
            <Input placeholder="请输入指标编码" disabled/>
          </Form.Item>
          <Form.Item name="name" label={'指标名称'} rules={[{ required: true, message: '请填写指标名称!' }]} >
            <Input placeholder="请输入指标名称" />
          </Form.Item>
          <Form.Item name="attribute" label={'指标属性'} rules={[{ required: true, message: '请选择指标属性!' }]}>
            <Select placeholder="请选择指标属性" options={[
              { value: '10', label: '集团' },
              { value: '20', label: '中心' },
              { value: '30', label: '部门' },
            ]} />
          </Form.Item>
          <Form.Item name="maxScore" label={'最高分值'} rules={[{ required: true, message: '请选择最高分值!' }]}>
            <Input placeholder="请输入最高分值" />
          </Form.Item>
          <Form.Item name="minScore" label={'最低分值'} rules={[{ required: true, message: '请选择最低分值!' }]}>
            <Input placeholder="请输入最低分值" />
          </Form.Item>
          <Form.Item name="evaluationMethod" label={'考评方式'} rules={[{ required: true, message: '请选择考评方式!' }]}>
            <Select placeholder="请选择考评方式" options={[
              { value: '40', label: '定量' },
              { value: '50', label: '定性' },
            ]} />
          </Form.Item>
          <Form.Item name="manageType" label={'管理分类'} rules={[{ required: true, message: '请选择管理分类!' }]}>
            <Select placeholder="请选择管理分类" options={[
              { value: '1', label: '部门' },
              { value: '2', label: '员工' },
            ]} />
          </Form.Item>
          <Form.Item name="department" label={'所属部门'} rules={[{ required: true, message: '请选择所属部门!' }]}>
            <Select placeholder="请选择所属部门" options={[
              { value: '综合管理部', label: '综合管理部' },
              { value: '业务控制部', label: '业务控制部' },
              { value: '财务部', label: '财务部' },
              { value: '人力资源部', label: '人力资源部' },
            ]} />
          </Form.Item>
          <Form.Item name="examineDept" label={'考核部门'} rules={[{ required: true, message: '请选择考核部门!' }]}>
            <Select placeholder="请选择考核部门" options={[
              { value: '综合管理部', label: '综合管理部' },
              { value: '业务控制部', label: '业务控制部' },
              { value: '财务部', label: '财务部' },
              { value: '人力资源部', label: '人力资源部' },
            ]} />
          </Form.Item>
          <Form.Item name="managementDept" label={'管理部门'} rules={[{ required: true, message: '请选择管理部门!' }]}>
            <Select placeholder="请选择管理部门" options={[
              { value: '综合管理部', label: '综合管理部' },
              { value: '业务控制部', label: '业务控制部' },
              { value: '财务部', label: '财务部' },
              { value: '人力资源部', label: '人力资源部' },
            ]} />
          </Form.Item>
          <Form.Item name="validityTime" label={'生效日期'} rules={[{ required: true, message: '请选择生效日期!' }]}>
            <RangePicker placeholder="请选择生效日期" style={{width:'100%'}} />
          </Form.Item>
          <Form.Item name="content" label={'指标定义'} rules={[{ required: true, message: '请填写指标定义!' }]} >
            <TextArea showCount maxLength={200} placeholder="请输入指标定义" />
          </Form.Item>
          <Form.Item name="standard" label={'考核标准'} rules={[{ required: true, message: '请填写考核标准!' }]} >
            <TextArea showCount maxLength={200} placeholder="请输入考核标准" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 指标库详情弹窗 */}
      <Modal title={'指标详情'} open={detailModal} onCancel={detailModalCancel} footer={[
        <Button key="back" onClick={detailModalCancel}>
          返回
        </Button>
      ]} 
      style={{ top: 0 }}>
        <Form
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          form={detailForm}
          autoComplete="off"
        >
          <Form.Item name="targetTypeName" label={'指标类型'}>
            <span>{detailData.targetTypeName}</span>
          </Form.Item>
          <Form.Item name="code" label={'指标编码'}>
            <span>{detailData.code}</span>
          </Form.Item>
          <Form.Item name="name" label={'指标名称'}>
            <span>{detailData.name}</span>
          </Form.Item>
          <Form.Item name="attribute" label={'指标属性'}>
            {detailData.attribute === "10" && <span>集团</span>}
            {detailData.attribute === "20" && <span>中心</span>}
            {detailData.attribute === "30" && <span>部门</span>}
          </Form.Item>
          <Form.Item name="maxScore" label={'最高分值'}>
            <span>{detailData.maxScore}</span>
          </Form.Item>
          <Form.Item name="minScore" label={'最低分值'}>
            <span>{detailData.minScore}</span>
          </Form.Item>
          <Form.Item name="evaluationMethod" label={'考评方式'}>
            {detailData.evaluationMethod === "40" && <span>定量</span>}
            {detailData.evaluationMethod === "50" && <span>定性</span>}
          </Form.Item>
          <Form.Item name="manageType" label={'管理分类'}>
            {detailData.manageType === "1" && <span>部门</span>}
            {detailData.manageType === "2" && <span>员工</span>}
          </Form.Item>
          <Form.Item name="department" label={'所属部门'}>
            <span>{detailData.department}</span>
          </Form.Item>
          <Form.Item name="examineDept" label={'考核部门'}>
            <span>{detailData.examineDept}</span>
          </Form.Item>
          <Form.Item name="managementDept" label={'管理部门'}>
            <span>{detailData.managementDept}</span>
          </Form.Item>
          <Form.Item name="validityTime" label={'生效日期'}>
            <span>{detailData.validityTime}</span>
          </Form.Item>
          <Form.Item name="content" label={'指标定义'}>
            <span>{detailData.content}</span>
          </Form.Item>
          <Form.Item name="standard" label={'考核标准'}>
            <span>{detailData.standard}</span>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
export default indicatorLibrary;